<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js动画效果与velocityjs</title>
    <script src="vue.js"></script>
    <script src="velocity.min.js"></script>
</head>
<body>
    <div id="app">
        <!--
            官网：
            http://velocityjs.org/
            使用vue函数钩子实现动画效果
            下面演示的是进入动画，离开动画的钩子函数对应为：
            before-leave
            leave
            after-leave
         -->
        <transition
                name="fade"
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="handleAfterEnter"
        >
            <div v-show="show">Hello World ...</div>
        </transition>

        <button @click="handleClick">Toggele</button>
    </div>

    <script>
        new Vue({
            el : "#app" ,
            data : {
                show : false
            },
            methods : {
                handleClick : function(){
                    this.show = !this.show ;
                },
                handleBeforeEnter : function (el) {
                    // el.style.color = 'pink'
                    el.style.opacity = 0
                },
                handleEnter : function (el ,done) {
                   /* setTimeout(()=>{
                        el.style.color = 'green'
                        // 动画执行完之后需要手动执行done表明动画执行完了，动画执行完之后会又调用一个函数afterEnter
                    }, 2000)

                    setTimeout(()=>{
                        done()
                    }, 4000)*/
                   // opacity从0 到1 耗时3000ms
                   Velocity(el,
                       {opacity:1},
                       {
                           duration : 3000,
                           complete : done // complete执行完之后调用执行done，在进入handleAfterEnter
                       })
                },
                handleAfterEnter : function (el) {
                    // el.style.color = 'yellow'
                    alert("动画结束！")
                }
            }
        })
    </script>
</body>
</html>